//根据表生成JsonSchema
import {
	ElButton,
	ElForm,
	FormInstance,
	ElFormItem,
	ElInput,
	ElRadioGroup,
	ElRadioButton,
	ElCheckbox,
	ElInputNumber
} from "element-plus";
import { SchemaFrom, SchemaItem, ValidForm, TypeString } from "./interface";

import { VAceEditor } from "vue3-ace-editor";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/theme-monokai";
import "ace-builds/src-noconflict/theme-cobalt";
import "ace-builds/src-noconflict/theme-chrome";
import "ace-builds/src-noconflict/ext-static_highlight";
import "ace-builds/src-noconflict/ext-beautify";
export default defineComponent({
	setup() {
		return () => (
			<>
				<DefineSchema />
			</>
		);
	}
});
const DefineSchema = defineComponent({
	setup() {
		const formRef = ref<FormInstance>();
		const schemaFrom = reactive<SchemaFrom>({
			key: "test",
			title: "测试",
			description: "单一节点",
			type: "string",
			valid: true,
			rules: []
		});
		const validForm = reactive<ValidForm>({
			maxLength: 5,
			minLength: 2
		});
		const jsonError = ref(false);
		const jsonData = ref("{}");
		const aceConfig = reactive({
			lang: "json", //解析json
			theme: "cobalt", //主题
			readOnly: false, //是否只读
			options: {
				enableBasicAutocompletion: true,
				enableSnippets: true,
				enableLiveAutocompletion: true,
				showPrintMargin: false,
				tabSize: 2,
				fontSize: 13
			}
		});
		function generatorSchema() {
			const jsonItem: SchemaItem = {};
			jsonItem[schemaFrom.key] = {
				type: schemaFrom.type,
				title: schemaFrom.title,
				description: schemaFrom.description
			};
			if (schemaFrom.valid) {
				switch (schemaFrom.type) {
					case "string":
						let stringValid = jsonItem[schemaFrom.key] as TypeString;
						stringValid.maxLength = validForm.maxLength;
						stringValid.minLength = validForm.minLength;
						stringValid.pattern = validForm.pattern;
						console.log(stringValid);
						break;
				}
			}
			//生成标准schema
			jsonData.value = JSON.stringify(
				{
					type: "object",
					properties: jsonItem
				},
				null,
				2
			);
		}
		const initJsonEditer = () => {
			// jsonData.value = JSON.stringify({}, null, 2);
		};
		const validJson = () => {
			try {
				JSON.parse(jsonData.value);
				jsonError.value = false;
			} catch (e) {
				jsonError.value = true;
			}
		};
		return () => (
			<>
				<div class="flex justify-between pt-6">
					<ElForm ref={formRef} label-width="80px" style="width:400px">
						<ElFormItem label="key">
							<ElInput v-model={schemaFrom.key} onInput={() => generatorSchema()} />
						</ElFormItem>
						<ElFormItem label="名称">
							<ElInput v-model={schemaFrom.title} onInput={() => generatorSchema()} />
						</ElFormItem>
						<ElFormItem label="描述">
							<ElInput v-model={schemaFrom.description} onInput={() => generatorSchema()} />
						</ElFormItem>
						<ElFormItem label="类型">
							<ElRadioGroup v-model={schemaFrom.type} onInput={() => generatorSchema()}>
								<ElRadioButton label="string">字符串</ElRadioButton>
								<ElRadioButton label="number">数值</ElRadioButton>
								<ElRadioButton label="boolean">布尔</ElRadioButton>
								{/* <ElRadioButton label="object">对象</ElRadioButton> */}
								{/* <ElRadioButton label="object">数组</ElRadioButton> */}
							</ElRadioGroup>
						</ElFormItem>
						<ElFormItem label="校验">
							<ElCheckbox v-model={schemaFrom.valid} />
						</ElFormItem>
						{schemaFrom.valid && schemaFrom.type == "string" ? (
							<>
								<ElFormItem label="最大长度">
									<ElInputNumber v-model={validForm.maxLength} onInput={() => generatorSchema()} style="width:100%" />
								</ElFormItem>
								<ElFormItem label="最小长度">
									<ElInputNumber v-model={validForm.minLength} onInput={() => generatorSchema()} style="width:100%" />
								</ElFormItem>
								<ElFormItem label="验证规则">
									<ElInput v-model={validForm.pattern} placeholder="正则表达式" onInput={() => generatorSchema()} />
								</ElFormItem>
							</>
						) : null}
					</ElForm>
					<ElButton
						class="ml-2 mr-2"
						type="primary"
						onClick={() => {
							generatorSchema();
						}}
					>
						生成
					</ElButton>
					<div class="flex-1">
						<VAceEditor
							value={jsonData.value}
							onInit={() => initJsonEditer()}
							onInput={() => validJson()}
							lang="json"
							theme={aceConfig.theme}
							options={aceConfig.options}
							class="ace-editor w-full h-96"
						/>
					</div>
				</div>
				<div class="flex justify-between"></div>
			</>
		);
	}
});
